<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>时间滑块</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
      #mapDiv {
        position: relative;
      }
      #bottomPanel {
        left: 50%;
        margin: 0 auto;
        margin-left: -500px;
        position: absolute; 
        bottom: 2.5em;
      }
      #timeInfo{
        border-radius: 4px;
        border: solid 2px #ccc;
        background-color: #fff;
        display: block;
        padding: 5px;
        position: relative;
        text-align: center;
        width: 1000px;
        z-index: 99;
      }
    </style>

    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
      var map;
      require([
        "esri/map", 
        "esri/layers/ArcGISImageServiceLayer",
        "esri/TimeExtent", "esri/dijit/TimeSlider",
        "dojo/_base/array", "dojo/dom", "dojo/domReady!"
      ], function(
        Map, 
        ArcGISImageServiceLayer,
        TimeExtent, TimeSlider,
        arrayUtils, dom
      ) {
        map = new Map("mapDiv", {
          center: [118.786312,31.914647],
          zoom: 18
        });

        var opLayer = new ArcGISImageServiceLayer("http://39.100.50.46:6080/arcgis/rest/services/GuanKe/HHU_STDemMap/MapServer");

        //add the gas fields layer to the map 
        map.addLayers([opLayer]);

        map.on("layers-add-result", initSlider);

        function initSlider(timeSliderDiv) {
          var timeSlider = new TimeSlider({
            style: "width: 100%;"
          }, dom.byId(timeSliderDiv));
          map.setTimeSlider(timeSlider);

          var timeExtent = new TimeExtent();
          timeExtent.startTime = new Date("2011/01/01 00:00:00 UTC");
          timeExtent.endTime = new Date(" 2011/07/01 00:00:00 UTC");
          timeSlider.setThumbCount(1);//设置指针数量
          timeSlider.createTimeStopsByTimeInterval(timeExtent, 1, "esriTimeUnitsWeeks");//创建时间滑块的时间刻度，一个刻度是2年
         //两个指针的间隔
          timeSlider.setThumbMovingRate(1000);//指针移动速度
          timeSlider.startup();//定性控件

          //设置间隔标签
          var labels = arrayUtils.map(timeSlider.timeStops, function(timeStop, i) { 
            if ( i % 2 === 0 ) {
              return timeStop.getUTCFullWeek(); 
            } else {
              return "";
            }
          }); 

          timeSlider.setLabels(labels);
          
        }
      });
    </script>
  </head>
  <body class="claro">

    <div id="mapDiv">
      <div id="bottomPanel">
        <div id="timeInfo">
        
          <div id="timeSliderDiv"></div>
        </div>
      </div>
    </div>
  </body>
</html>
